<template>
	<view>
		<block >
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in peopleList" :key="index" :options="options" @click="actionClick(item)"   @change="change">
					<view class="chat-item" @click="goChat(item)">
						<image class="avatar" :src="item.accountHead" />
						<view class="user-info">
							<view class="name-box">
								<view class="name">{{item.realName}}</view>
								<view v-if="item.identity" class="identity">
									{{handleComma(item.identity)}}
								</view>
							</view>
						</view>
						<view class="bot-line" />
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</block>
		<view class="no-data" v-if="peopleList.length===0">
			<image src="https://www.innovationgloble.com/wxs/img/wx/no-data.png" mode="aspectFit"></image>
			<view class="no-data-text">暂无联系人</view>
		</view>
	</view>
</template>

<script>
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				peopleList: [],
				options: [{
					text: '移除通讯录',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		onShow() {
			this.loadContact();
		},
		methods: {
			//删除第一位为逗号
			handleComma(val) {
				if (val && val.indexOf(',') === 0) {
					return val.substr(1)
				} else {
					return val
				}
			},
			goChat(item) {
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=${item.linkUserId}`
				})
			},
			actionClick(item) {
				if(!permissionJudge('web:phonebook:delete')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				this.removePhoneBookUser(item.pbId);
			},
			removePhoneBookUser(userId) {
				const params = [userId];
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确认从通讯录中移除吗？",
					success:function(res){
						if(res.confirm)
						{
							that.$request.post({
								url: 'phonebook/delete',
								data: params,
							}).then(info => {
								that.loadContact();
								uni.showToast({
									title: info
								});
							}, res => {});
						}
					},
				})
			},
			change(open) {
				console.log('当前开启状态：' + open)
			},
			loadContact() {
				const params = {
					pageSize: 20,
					pageNum: 1,
				}
				this.$request.get({
					url: 'phonebook/list',
					data: params,
				}).then(res => {
					this.peopleList = res.list;
				}, res => {});
			}
		}
	}
</script>

<style scoped lang="less">
	.no-data{
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		padding-bottom: 300upx;
		flex-flow: column;
		image{
			width: 240upx;
			height: 166upx;
		}
		.no-data-text {
			color: #666666;
			font-size: 26rpx;
			margin: 30rpx 0;
		}
	}
	.chat-item {
		width: 100%;
		height: 144upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;

		position: relative;

		.time {
			position: absolute;
			top: 20upx;
			right: 20upx;
		}

		.red_circle {
			position: absolute;
			top: 80upx;
			right: 20upx;
			width: 20upx;
			height: 20upx;
			border-radius: 50%;
			background-color: #FE596A;
		}
	}

	.user-info {
		.name-box {
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				font-size: 30upx;
				color: #444444;
				font-weight: bold;
			}

			.identity {
				margin-left: 10upx;
				font-size: 22upx;
				color: #C99301;
				border: solid 1upx #C99301;
				padding: 1upx 8upx;


				opacity: 0.4;
				border: 2upx solid rgba(217, 170, 39, 1);
			}


		}

	}

	.bot-line {
		position: absolute;
		bottom: 0;
		height: 2upx;
		background-color: #F5F5F5;
		left: 124upx;
		right: 0upx;
	}

	.content {
		font-size: 26upx;
		color: #888787;
	}

	.avatar {
		width: 84upx;
		height: 84upx;
		border-radius: 50%;
		background-color: #F9F9F9;
		margin-right: 20upx;
	}
</style>
